<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-live-preview.qdoc -->
  <title>Previewing | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Previewing</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="creator-building-running.html" />
  <link rel="next" href="creator-live-preview-desktop.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="creator-building-running.html">Building and Running</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-live-preview-desktop.html">Previewing on Desktop</a>
</p><p/>
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Previewing</h1>
<span class="subtitle"></span>
<!-- $$$creator-live-preview.html-description -->
<div class="descr"> <a name="details"></a>
<p>You can use the QML live preview to preview a QML file or the entire UI on the desktop, as well as on Android and embedded Linux devices. The changes you make to the UI are instantly visible to you in the preview.</p>
<p>In addition, you can use Qt Design Viewer to run <a href="quick-projects.html#creating-qt-quick-ui-projects">Qt Quick UI projects</a> in most widely-used web browsers on the desktop and in mobile devices This enables you to easily share your designs with reviewers who don't have Qt Creator.</p>
<p class="centerAlign"><img src="images/qtcreator-live-preview.png" alt="" /></p><ul>
<li><a href="creator-live-preview-desktop.html">Previewing on Desktop</a><p>You can preview individual QML files or the whole UI in the Design mode.</p>
</li>
<li><a href="creator-live-preview-devices.html">Previewing on Devices</a><p>You can preview Qt Quick applications on devices that you have connected to the development PC. For more information, see <a href="creator-connecting-mobile.html">Connecting Devices</a>.</p>
</li>
<li><a href="qt-design-viewer.html">Previewing in Browsers</a><p>You can open <a href="https://qt-webassembly.io/designviewer/">Qt Design Viewer</a> in a browser and load applications to it.</p>
</li>
</ul>
</div>
<!-- @@@creator-live-preview.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="creator-building-running.html">Building and Running</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-live-preview-desktop.html">Previewing on Desktop</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
